<template>
	<view class="">
		<view class="list">
			<!-- <view class="item">
				<li-svg-gold :show="state" size="auto" />
			</view> -->
			<view class="item clm-c-c" >
				<li-svg-photo :show="state"  />
				<text class="size-c">photo</text>
			</view>
			<view class="item clm-c-c">
				<li-svg-score :show="state"  />
				<text class="size-c">score</text>
			</view>
			<view class="item clm-c-c">
				<li-svg-zan :show="state" />
				<text class="size-c">zan</text>
			</view> 
			<view class="item clm-c-c">
				<li-svg-collect :show="state" />
				<text class="size-c">collect</text>
			</view>
			<view class="item clm-c-c">
				<text class="size-c">更多+</text>
			</view>
		</view>
		
		<button class="footer_btn" type="success" @click="state = !state">状态 {{state}}</button>
		<text class="footer_tip size-c ">兼容性： 仅支持app-vue & h5,由于每一组件均为一个vue文件，故推荐使用esaycom规则</text>

	</view> 
</template>

<script>
	export default {
		data() {
			return {
				state: true,
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.list{
		display: flex;
		flex-wrap: wrap;
	}
	.item{
		width: 20%;
		padding: 20rpx;
		box-sizing: border-box;
		// background-color: rgba(255,0,0,0.2);
		margin-right: 5%;
	}
	.clm-c-c{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.size-c{
		font-size: 26rpx;
	}
	.c-n{
		color: #333333;
	}
	.footer_btn{
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 710rpx;
		margin: 200rpx 20rpx;
		color: #FFFFFF;
		background-color: #FF7744;
		box-sizing: border-box;
	}
	.footer_tip{
		position: fixed;
		bottom: 0rpx;
		left: 0;
		width: 710rpx;
		padding: 50rpx;
		box-sizing: border-box;
	}
</style>
